<template>
  <div style="display: flex">
    <!--     
    <el-form-item label="片区/村社名称">
        <el-input
          suffix-icon="xxxx"
          v-model="searchParams.communityName"
          placeholder="请输入"
        ></el-input>
      </el-form-item>
      <el-form-item label="供电单位">
        
      </el-form-item>
      <el-form-item label="供电线路">
        <selectPage
          :item="lineItem"
          v-model="model.lineId"
          :search="lineSearch"
          @update:modelValue="changeLine"
        />
      </el-form-item> -->

    <selectPage
      :item="powerItem"
      v-model="model.powerId"
      :firstValue="model.powerId"
      @update:modelValue="changePower"
    />
    <selectPage
      :item="lineItem"
      v-model="model.lineId"
      :search="lineSearch"
      :firstValue="model.lineId"
      @update:modelValue="changeLine"
    />
    <selectPage
      :item="areaItem"
      v-model="model.areaId"
      :search="areaSearch"
      :firstValue="model.areaId"
      @update:modelValue="changeArea"
    />
    <!-- <el-select
      v-model="model.powerId"
      filterable
      placeholder="请选择供电单位，单选"
      clearable
      @change="changePower"
    >
      <el-option
        v-for="item in props.powerSupplyIdList"
        :key="item.value"
        :value="item.value"
        :label="item.label"
      >
      </el-option>
    </el-select> -->
    <!-- <el-select
      v-model="model.lineId"
      filterable
      placeholder="请选择供电线路，单选"
      clearable
      @change="changLine"
    >
      <el-option
        v-for="item in lineIdList"
        :key="item.value"
        :value="item.value"
        :label="item.label"
      >
      </el-option>
    </el-select>
    <el-select
      v-model="model.areaId"
      filterable
      placeholder="请选择台区，单选"
      clearable
      @change="changArea"
    >
      <el-option
        v-for="item in areaList"
        :key="item.value"
        :value="item.value"
        :label="item.label"
      >
      </el-option>
    </el-select> -->
  </div>
</template>

<script lang="ts" setup>
import { lineService } from "@/api/line";
import { basicConfigService } from "@/api/basicConfig";
import selectPage from "./selectPage.vue";
const props = defineProps({
  form: {
    type: Object,
  },
  item: {
    type: Object,
  },
  width: {
    type: String,
    default: "120px",
  },
  powerSupplyIdList: {
    type: Object,
  },
});

const emit = defineEmits(["change"]);
const model = ref({ ...props.item });

const powerItem = ref({
  name: "",
  key: "powerId",
  funName: "getByAreaQueryByPower",
  option: {
    name: "powerName",
    value: "powerId",
  },
});
const lineSearch = ref({
  powerId: model.value.powerId,
});
const lineItem = ref({
  name: "供电线路",
  key: "lineId",
  funName: "getByAreaQueryByLine",
  option: {
    name: "lineName",
    value: "lineId",
  },
});
const areaSearch = ref({
  powerId: model.value.powerId,
  lineId: model.value.lineId,
});
const areaItem = ref({
  name: "台区",
  key: "areaId",
  funName: "getByAreaQueryByArea",
  option: {
    name: "areaName",
    value: "areaId",
  },
});

// const lineIdList = ref([]);
watch(
  () => props.item,
  (val) => {
    const newVal = { ...val };
    if (newVal.powerId) {
      newVal.powerId += "";
    }
    if (newVal.lineId) {
      newVal.lineId += "";
    }
    if (newVal.areaId) {
      newVal.areaId += "";
    }
    model.value = { ...newVal };
  },
  { deep: true, immediate: true }
);
// const getLineList = () => {
//   basicConfigService
//     .getByAreaQueryDto({ data: { powerId: model.value.powerId } })
//     .then((res) => {
//       lineIdList.value = res.data.map((n) => {
//         return {
//           label: n.lineName,
//           value: n.lineId,
//           id: n.id,
//         };
//       });
//     });
// };

const changePower = (val: any) => {
  lineSearch.value.powerId = val;
  areaSearch.value.powerId = val;
  model.value.lineId = "";
  model.value.areaId = "";
  emit("change", model.value);
};
const changeLine = (val: any) => {
  areaSearch.value.lineId = val;
  model.value.areaId = "";
  emit("change", model.value);
};

const changeArea = () => {
  emit("change", model.value);
};

// const changLine = () => {
//   if (model.value.lineId) {
//     model.value.areaId = "";
//     getAreaList();
//     emit("change", model.value);
//   }
// };
// const changArea = () => {
//   if (model.value.areaId) {
//     model.value.id = areaList.value.find(
//       (n) => n.value == model.value.areaId
//     )?.id;
//   }
//   emit("change", model.value);
// };

const handleChange = (e, i) => {
  emit("change", model.value);
};
// const areaList = ref([]);
// const getAreaList = () => {
//   basicConfigService
//     .getByAreaQueryDto({
//       data: { powerId: model.value.powerId, lineId: model.value.lineId },
//     })
//     .then((res) => {
//       areaList.value = res.data.map((e) => {
//         return {
//           label: e.areaName,
//           value: e.areaId,
//           id: e.id,
//         };
//       });
//     });
// };
onMounted(() => {
  //   if (props.item.lineId) {
  //     getLineList();
  //   }
  //   if (props.item.areaId) {
  //     getAreaList();
  //   }
});
</script>

<style lang="less" scoped></style>
